<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="lib/jq.js"></script>
</head>

<body>
<!--<h2>内容筛选器</h2>-->
<!--<h3>:contains/:has</h3>-->
<!--<div class="left">-->
    <!--<div class="div">-->
        <!--<p>:contains</p>-->
    <!--</div>-->
    <!--<div class="div">-->
        <!--<p>:contains</p>-->
    <!--</div>-->
    <!--<div class="div">-->
        <!--<p>-->
            <!--<span>:has</span>-->
        <!--</p>-->
    <!--</div>-->
    <!--<div class="div">-->
        <!--<p class="has_test">:contains</p>-->
    <!--</div>-->
<!--</div>-->

<!--&lt;!&ndash;<script type="text/javascript">&ndash;&gt;-->
    <!--&lt;!&ndash;// 1.contains 包含xxx的文本&ndash;&gt;-->
    <!--&lt;!&ndash;$('.div:contains(":contain")').css("color", "red");&ndash;&gt;-->
<!--&lt;!&ndash;</script>&ndash;&gt;-->

<!--<script type="text/javascript">-->
    <!--// 2. has 包含xxx 元素-->
    <!--$('.div:has(".has_test")').css("color", "blue");-->
<!--</script>-->


<h3>:parent/:empty</h3>
<div class="left">
    <div class="aaron">
        <a>:parent</a>
    </div>
    <div class="aaron">
        <a>:parent1</a>
    </div>
    <div class="aaron">
        <a>:pare</a>
    </div>
    <div class="aaron">
        <a></a>
    </div>
</div>

<div class="left">
    <div class="div">
        <p>:contains</p>
    </div>
    <div class="div">
        <p>:contains</p>
    </div>
    <div class="div">
        <p>
            <span>:has</span>
        </p>
    </div>
    <div class="div">
        <p>:contains</p>
    </div>

    <form>
        <input type=text>
        <input type="password">
        <a href="123"></a>
        <a href="234"></a>
        <a href="456"></a>
    </form>
</div>

<script type="text/javascript">
    //: parent 包含子子元素或者文本
    //增加一个蓝色的边框
    // $("a:parent").css("border", "3px groove blue");
</script>

<script type="text/javascript">
    //：empty 不包含子元素和文本
    //
    // $("a:parent").text(":empty").css("border", "3px groove red");
    // //包含某个文本
    // $("a:contains(parent1)").css({"border":"10px groove green","margin":"10px","display":"inline-block"});

    //属性选择器
    // $('input[type=text]').css("border","3px green solid");
    // $('input[type=password]').css("border","3px red solid")
    var x = $('a[href=456]').html('asdf').attr("href");
    document.write('shuxin:'+x);
    //shanchu
    $('a[href=456]').text('changed');
</script>

</body>

</html>